<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Atmosphere SwaggerSocket for CXF Greeter</title>
    <script type="text/javascript" src="javascript/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="javascript/atmosphere.js"></script>
    <script type="text/javascript" src="javascript/application.js"></script>
    <style>
    * {font-family: tahoma; font-size: 12px; padding: 0px; margin: 0px;}
    p {line-height: 18px;}
    div {width: 500px; margin-left: auto; margin-right: auto;}
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    th, td {
      padding: 5px;
      text-align: left;    
    }
    button {
      padding: 5px;
      background-color:lightblue;
    }
    #content {padding: 5px; background: #ddd; border-radius: 5px; border: 1px solid #CCC; margin-top: 10px;}
    #command {padding: 5px; background: #ddd; border-radius: 5px; border: 1px solid #CCC; margin-top: 10px;}
    #header {padding: 5px; background: #f5deb3; border-radius: 5px; border: 1px solid #CCC; margin-top: 10px;}
    #textecho {border-radius: 2px; border: 1px solid #ccc; margin-top: 10px; padding: 5px; width: 400px;}
    #namegreet {border-radius: 2px; border: 1px solid #ccc; margin-top: 10px; padding: 5px; width: 60px;}
    #namegreeter {border-radius: 2px; border: 1px solid #ccc; margin-top: 10px; padding: 5px; width: 60px;}
    #textgreet {border-radius: 2px; border: 1px solid #ccc; margin-top: 10px; padding: 5px; width: 240px;}
    #namegreetstatus {border-radius: 2px; border: 1px solid #ccc; margin-top: 10px; padding: 5px; width: 60px;}
    #status {width: 150px; display: block; float: left; margin-top: 15px;}
    </style>
</head>
<body>
    <div id="header"><h3>Atmosphere SwaggerSocket for CXF Greeter</h3></div>
    <div>
        <span id="status">Connecting...</span><input type="text" id="namegreeter"/>
        <div id="operations">
          <table style="width:100%">
            <tr>
              <th>operation</th>
            </tr>
            <tr>
              <td><button id="buttonping" value="ping" disabled="disabled">ping</button></td>
            </tr>
          </table>
          <table style="width:100%">
            <tr>
              <th>operation</th>
              <th>text</th>
            </tr>
            <tr>
              <td><button id="buttonecho" disabled="disabled">echo</button></td>
              <td><input type="text" id="textecho"/></td>
            </tr>
          </table>
          <table style="width:100%">
            <tr>
              <th>operation</th>
              <th>name</th>
              <th>text</th>
            </tr>
            <tr>
              <td><button id="buttongreet" disabled="disabled">greet</button></td>
              <td><input type="text" id="namegreet"/></td>
              <td><input type="text" id="textgreet"/></td>
            </tr>
          </table>
          <table style="width:100%">
            <tr>
              <th>operation</th>
              <th>name</th>
            </tr>
            <tr>
              <td><button id="buttongreetstatus" disabled="disabled">greetstatus</button></td>
              <td><input type="text" id="namegreetstatus"/></td>
            </tr>
          </table>
          <table style="width:100%">
            <tr>
              <th>operation</th>
            </tr>
            <tr>
              <td><button id="buttongreetsummary" disabled="disabled">greetsummary</button></td>
            </tr>
         </table>
         <table style="width:100%">
            <tr>
              <th>operation</th>
            </tr>
            <tr>
              <td><button id="buttonsubscribe" disabled="disabled">subscribe</button></td>
            </tr>
         </table>
         <table style="width:100%">
            <tr>
              <th>operation</th>
            </tr>
            <tr>
              <td><button id="buttonunsubscribe" disabled="disabled">unsubscribe</button></td>
              <td><input type="text" id="subid"/></td>
            </tr>
         </table>
        </div>
    </div>
    <div id="content"></div>
</body>
</html>
